import React, { Component } from 'react';
import { Text, View, ScrollView, StyleSheet} from 'react-native';
import { Card } from 'iftide';

export default class Basic extends Component { 

    render() {
        const img = require('./Icon.png');
        var titleExtra1 = (
            <View style={styles.container}>
                <Text style={styles.tag1}>优秀</Text>
                <Text style={styles.tag2}>普遍看好</Text>
            </View>
        );

        return (
            <View>
                <Card
                    full={true}
                    headerIcon={img}
                    headerTitle={<Text>自定义卡片标题</Text>}
                    headerTitleExtra={<Text>标题辅助</Text>}
                    content={<View style={{ height: 100 }}><Text>这里可以放图片，文字，按钮</Text></View>}
                    footer={<Text>底部内容</Text>}
                    footerExtra={<Text>底部内容辅助</Text>}
                />

                <Card
                    full={true}
					showHeadLine={false}
					showBorder={false}
					showSeparatorLine={true}
                    headerTitle={<Text>理财209天</Text>}
                    headerTitleExtra={titleExtra1}
                    content={<View style={{ height: 100 }}><Text>自定义内容区域：图片，文字，按钮，构件</Text></View>}
                    footer={<Text style={{color:'#666',fontSize:15}}>募集期：04月18日-04月23日</Text>}
                />
                </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
    },
    tag1: {
        paddingLeft: 5,
        paddingRight: 5,
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#FF7b7b',
        fontSize: 12,
        color:'#FF7b7b',
    },
    tag2: {
        paddingLeft: 5,
        paddingRight: 5,
        borderRadius: 10,
        borderWidth: 1,
        borderColor: '#FF7b7b',
        fontSize: 12,
        color:'#FF7b7b',
        marginLeft:15,
    }  
})